<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 100px;
            background: blue;
            height: 200px;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="box"></div>
    <script>

        // 鼠标触发事件相对于 页面的距离；
        // 浏览器视口     页面 是整个document的大小 


        // 1.clientX、clienY相对于浏览器的 左边和上边的距离
        // var boxEle = document.querySelector(".box");
        // boxEle.onclick = function(e){
        //     var e = e || window.event;
        //     console.log("距离左边的:",e.clientX);
        //     console.log("距离上边的：",e.clientY);
        // }

        // 2.pageX、pageY 相对于页面的左边和上边的距离
        var boxEle = document.querySelector(".box");
        boxEle.onclick = function(e){
            var e = e || window.event;
            console.log("相对于页面的左边",e.pageX);
            console.log("相对于页面的上边",e.pageY);
        }


        /* 
        总结： 
            一、和元素有关的内容
            offsetWidth 、offsetHeight : 自身 + 内边距  + 边框
            clientWidth、clientHeight ： 自身 + 内边距

            offsetLeft 、offsetTop 
                        1.没有定位 ： 相对浏览器的偏移量
                        2.有定位：相对定位父级的偏移量
            clientLeft 、clientTop ： 左边和上边的边框宽度

            二、和鼠标坐标有关内容
            1.offsetX 、offsetY： 鼠标触发事件相对于触发元素的x、y的距离
            2.clientX、clientY ： 鼠标触发事件的时候相对于浏览器的x、y的距离
            3.pageX、pageY ： 相对于页面的x、y的距离
        
        
        
        */


    </script>
</body>
</html>